/* Position
------------------------------ */
.p-static   { position: static !important; }
.p-relative { position: relative !important; }
.p-absolute { position: absolute !important; }
.p-fixed    { position: fixed !important; }
.p-sticky   { position: sticky !important; }


/* Display
------------------------------ */
.d-none         { display: none !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block        { display: block !important; }
.d-table        { display: table !important; }
.d-table-row    { display: table-row !important; }
.d-table-cell   { display: table-cell !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }


/* Float
------------------------------ */
.clearfix {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}
.f-none  { float: none !important; }
.f-left  { float: left !important; }
.f-right { float: right !important; }


/* Sizing
------------------------------ */
.w-auto  { width: auto !important; }
.w-100   { width: 100% !important; }
.h-auto  { height: auto !important; }
.h-100   { height: 100% !important; }
.mw-auto { width: auto !important; }
.mw-100  { max-width: 100% !important; }
.mh-auto { height: auto !important; }
.mh-100  { max-height: 100% !important; }


/* Margin
------------------------------ */
.m-auto  { margin: auto !important; }
.mt-auto { margin-top: auto !important; }
.mr-auto { margin-right: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }
.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}


/* Font-size
------------------------------ */
.fz-xs   { font-size: $font--size-xs !important; }
.fz-sm   { font-size: $font--size-sm !important; }
.fz-base { font-size: $font--size-base !important; }
.fz-lg   { font-size: $font--size-lg !important; }
.fz-xl   { font-size: $font--size-xl !important; }
.fz-xxl  { font-size: $font--size-xxl !important; }


/* Text
------------------------------ */
.t-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.t-left       { text-align: left !important; }
.t-right      { text-align: right !important; }
.t-center     { text-align: center !important; }
.t-justify    { text-align: left !important; }
.t-nowrap     { white-space: nowrap !important; }
.t-lowercase  { text-transform: lowercase !important; }
.t-uppercase  { text-transform: uppercase !important; }
.t-capitalize { text-transform: capitalize !important; }


/* Vertical-align
------------------------------ */
.va-baseline    { vertical-align: baseline !important; }
.va-top         { vertical-align: top !important; }
.va-middle      { vertical-align: middle !important; }
.va-bottom      { vertical-align: bottom !important; }
.va-text-top    { vertical-align: text-top !important; }
.va-text-bottom { vertical-align: text-bottom !important; }


/* Border
------------------------------ */
.b-0        { border: 0 !important; }
.b-top-0    { border-top: 0 !important; }
.b-right-0  { border-right: 0 !important; }
.b-bottom-0 { border-bottom: 0 !important; }
.b-left-0   { border-left: 0 !important; }


/* Border-radius
------------------------------ */
.br-0      { border-radius: 0 !important; }
.br-circle { border-radius: 50% !important; }


/* Background
------------------------------ */
.bg-white       { background-color: $color--white !important; }
.bg-transparent { background-color: transparent !important; }
